<template>
  <div>
    <div id="cinemaNav"  style="position:fixed;width:100%;top:0px;z-index:99">
      <van-nav-bar :title="filmName" left-arrow @click-left="onClickLeft"/>
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>

    <ul class="cinemalist" style="margin-top:100px">
      <li v-for="(item, index) in cinemalist" :key="index" @click="goCinemaDetail(item)">
        <div class="info">
          <p class="cinemaname">{{ item.name }}</p>
          <p class="address">{{ item.address }}</p>
        </div>
        <p class="price">￥{{ item.lowPrice | price }} 起</p>
        <p class="distance">{{ item.Distance | distance }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { cinemaListData, Detail } from "@/api/api.js";

export default {
  name: "cinema",
  props: [],
  components: {},
  data() {
    return {
      filmName: "",
      cinemalist: [],
      // 获取城区名称
      districtName: [],
      value1: 0,
      value2: "a",
      value3: "A",
      option1: [
        {
          text: ["全城"],
          value: 0
        },
        {
          text: "全城",
          value: 1
        },
        {
          text: "全城",
          value: 2
        }
      ],
      option2: [
        {
          text: "APP订票",
          value: "a"
        },
        {
          text: "APP订票",
          value: "b"
        },
        {
          text: "APP订票",
          value: "c"
        }
      ],
      option3: [
        {
          text: "最近去过",
          value: "A"
        },
        {
          text: "最近去过",
          value: "B"
        },
        {
          text: "最近去过",
          value: "C"
        }
      ]
    };
  },
  //方法 函数写这里
  methods: {
    goCinemaDetail(id) {
      this.$router.push("/Cinema?" + id.cinemaId);
      console.log(id.cinemaId);
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {
    price(value) {
      return parseFloat(value / 100);
    },
    distance(value) {
      return value.toFixed(2) + "km";
    }
  },
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {
    this.filmId = window.location.search.substring(1);
    cinemaListData(this.$store.state.cityId).then(res => {
      console.log(res);
      this.cinemalist = res.data.data.cinemas;
      console.log("cinemalist", this.cinemalist);
    });
    Detail(this.filmId).then(res => {
      console.log(1);
      this.filmName = res.data.data.film.name;
    });
  },
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  mounted() {},
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {}
};
</script>


<style scoped>
.cinemalist {
  margin-top: 24px;
}

.cinemalist li {
  position: relative;
  background-color: #fff;
  padding: 15px;
}

.info {
  width: calc(100% - 65px);
  text-align: left;
  padding-right: 15px;
}

p {
  display: block;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cinemaname {
  color: #191a1b;
  font-size: 15px;
}

.address {
  color: #797d82;
  font-size: 13px;
  margin-top: 5px;
}

.price {
  font-size: 15px;
  color: #ff5f16;
  float: right;
  margin-top: -60px;
}

.distance {
  font-size: 15px;
  color: gray;
  float: right;
  margin-top: -30px;
}

.rmb {
  margin-right: 5px;
}

.upon {
  font-size: 10px;
}

.postiton {
  font-weight: 400;
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #797d82;
  text-align: center;
}

.van-button {
  color: black;
  background-color: white;
  border: 1px solid white;
  font-size: 15px;
  width: 25%;
  padding-top: 5px;
}

.right .van-button {
  width: 20px;
  height: 20px;
}
</style>